.hot-title{
    height: 1.62rem;
    position: relative;
    img{
        display: block;
        width: 2.29rem;
        height: .6rem;
        position: absolute;
        left: .45rem;
        top: .501rem;
    }
    .details{
        display: inline-block;
        height: 100%;
        position: absolute;
        right: .3rem;
        svg{
            margin-top: .81rem - .35rem;
            width: .45rem;
            height: .70rem;
        }
    }
}

// 热展内容
.hot-content{
    height: 7.32rem;
    border-radius: .12rem;
    .hot-main{
        margin-left: .28rem;
        width: 7.5rem - .56rem;
        height: 3.15rem;
        display: flex;
        .show-img{
            width: 4rem;
            height: 100%;
            border-radius: .12rem;
            overflow: hidden;
            img{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        .show-text{
            width: 7.50rem - 4rem;
            height: 100%;
            // background: yellow;
            .text{
                display: block;
                margin-left: .2rem;
                font-weight: lighter;
            }
            .msg{
                line-height: .40rem;
                font-size: .24rem;
                color: #999999;
            }
            #name{
                font-size: .36rem;
                color: white;
                word-break: break-all;
                height: 1.1rem;
                line-height: .55rem;
                margin-top: .25rem;
            }
            #price{
                font-size: .34rem;
                color: #d99812;
                line-height: .45rem;
            }
        }
    }
}

.show-node-box{
    width: 100%;
    overflow: hidden;
}

.show-node{
    display: flex;
    height: 3.94rem;
    padding-left: .28rem;
    margin-top: .24rem;
    overflow-x: scroll;
    li{
        width: 2.72rem;
        flex-shrink: 0;
        margin-right: .24rem;
        img{
            display: block;
            width: 100%;
            height: 2.2rem;
            border-radius: .12rem;
        }
        .nodeName{
            margin-top: .15rem;
            display: -webkit-box;
            font-weight: lighter;
            font-size: .28rem;
            padding: 0 .1rem;
            color: white;
            height: .9rem;
            line-height: .45rem;
            overflow: hidden;
            /* 2.用省略号来代替超出文本 */
            text-overflow: ellipsis;
            /* 3.设置盒子属性为-webkit-box  必须的 */
            display: -webkit-box;
            /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
            -webkit-line-clamp: 2;
            /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
            word-break: break-all;
            /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
            -webkit-box-orient: vertical;
        }
        .date{
            display: block;
            height: .45rem;
            line-height: .45rem;
            font-size: .24rem;
            padding: 0 .1rem;
            font-weight: lighter;
            color: #999999;
        }
    }
}